<template>
  <div class="globe-rotater-box-wrapper">
    <a class="btn-globe-rotater" :class="{ playing }" @click="togglePlay" :title="playing ? '暂停自转' : '地球自转'">
      <PlayCircleOutlined v-if="!playing" />
      <PauseCircleOutlined v-if="playing" />
      <!-- <span style="position: absolute;z-index: 9;color: blue;font-size: 1.1em;"><SyncOutlined spin v-if="playing" /></span> -->
      <span style="position: absolute;z-index: 9;color: darkblue;"><LoadingOutlined v-if="playing" /></span>
    </a>
    <div class="globe-datetime" :class="{ show: showTime }">
      <div class="flex-column-center">
        <div>
          <a class="datetime-item">{{ date.YYYY }}</a>
          年
          <a class="datetime-item">{{ date.MM }}</a>
          月
          <a class="datetime-item">{{ date.DD }}</a>
          日
        </div>
        <div>
          <a class="datetime-item">{{ date.HH }}</a>
          时
          <a class="datetime-item">{{ date.mm }}</a>
          分
          <a class="datetime-item">{{ date.ss }}</a>
          秒
        </div>
      </div>
      <a class="datetime-reset" title="重置到当前时间" @click="resetCurrTime"><HistoryOutlined /></a>
    </div>
    <div class="globe-rotater-settings"><slider-bar title="加速" titleWidth="3em" v-model:value="multiplier" :min="0" :max="5000" :step="100" /></div>
  </div>
</template>
<!-- <SyncOutlined spin /> -->
<!-- <LoadingOutlined /> -->
<!-- <HistoryOutlined /> -->
<script lang="ts">
import { SliderBar } from '@components/widgets';
import {
  PlayCircleOutlined,
  PauseCircleOutlined,
  PlayCircleFilled,
  PauseCircleFilled,
  ReloadOutlined,
  SyncOutlined,
  LoadingOutlined,
  HistoryOutlined
} from '@ant-design/icons-vue';
import { defineComponent, ref } from 'vue';
import Rotater from '../rotater';

export default defineComponent({
  name: 'globe-rotater-box',
  components: { PlayCircleOutlined, PauseCircleOutlined, SyncOutlined, ReloadOutlined, LoadingOutlined, HistoryOutlined, SliderBar },
  setup(props, context) {
    // console.log('props', props);
    // console.log('context', context);
    return { rotater: null };
  },
  props: {
    showTime: {
      type: Boolean,
      default: false
    },
    mp: {
      type: Number,
      default: 500
    },
    startOnMount: {
      type: Boolean,
      default: false
    },
    viewerSource: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      playing: false,
      rotateOptions: { multiplier: 500 },
      date: {}
    };
  },
  computed: {
    viewer() {
      return this.viewerSource && this.viewerSource.viewer;
    },
    multiplier: {
      get() {
        return this.rotateOptions.multiplier;
      },
      set(val) {
        this.rotateOptions.multiplier = val;
        this.viewer.clock.multiplier = val || 1;
      }
    }
  },
  watch: {
    mp: {
      handler(newVal) {
        this.rotateOptions.multiplier = newVal || 0;
      },
      immediate: true //true就表示会立即执行
    },
    viewer: {
      handler(newVal, oldVal) {
        // console.log(newVal)
        newVal && this.initRotater();
      },
      immediate: true //true就表示会立即执行
    }
  },
  mounted() {
    console.log('globe-rotater');
  },
  beforeUnmount() {
    let { rotater } = this;
    rotater && rotater.destroy();
    this.rotater = null;
  },
  methods: {
    initRotater() {
      let { viewer, rotateOptions, startOnMount, playing, onTick } = this;
      this.rotater = new Rotater(viewer, rotateOptions, onTick);
      startOnMount && !playing && this.togglePlay();
      return this.rotater;
    },
    onTick(ct) {
      const moment = this.$moment(ct);
      this.date = {
        YYYY: moment.format('YYYY'),
        MM: moment.format('MM'),
        DD: moment.format('DD'),
        HH: moment.format('HH'),
        mm: moment.format('mm'),
        ss: moment.format('ss')
      };
    },
    resetCurrTime() {
      this.rotater.resetCurrTime();
    },
    togglePlay() {
      this.playing = !this.playing;
      let { rotater } = this;
      if (this.playing) {
        rotater.start();
      } else {
        rotater.stop();
      }
    }
  }
});
</script>

<style lang="less">
.globe-rotater-box-wrapper {
  position: absolute;
  left: 0;
  bottom: 15px;
  display: flex;
  align-items: stretch;
  // width: 20em;
  // max-width: 100%;
  padding: 0;
  // background-color: rgba(0, 0, 0, 0.75);
  // margin-bottom: 10px;

  .btn-globe-rotater {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8em;
    width: 1.8em;
    height: 1.6em;
    margin: 0;
    color: white;
    background-color: rgba(40, 48, 60, 1);
    border-radius: 5px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    opacity: 0.8;
    transition: all 500ms;

    &.playing {
      opacity: 0.9;
      background-color: rgba(0, 0, 200, 0.9);
    }

    // &:hover {
    //   opacity: 0.8;
    //   background-color: rgba(0, 0, 200, 0.7);
    // }

    // &:active {
    //   opacity: 0.5;
    //   background-color: rgba(0, 0, 200, 0.9);
    // }
  }

  .globe-rotater-settings {
    display: none;
  }

  .globe-datetime {
    display: none;
    // flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    color: gray;
    font-size: 14px;
    line-height: 1.2em;

    // opacity: 0.8;
    background-color: rgba(0, 0, 0, 0.8);

    transition: all 500ms;

    a {
      color: #aaff88;
      font-weight: 600;
    }

    a.datetime-reset {
      padding: 3px;
      margin: 0 0 0 3px;
      color: #fff;
      font-size: 22px;
      transition: all 500ms;
      &:hover {
        color: #8ff;
        font-weight: 600;
      }
      &:active {
        opacity: 0.5;
      }
    }
  }

  .globe-datetime.show {
    display: flex;
  }
  &:hover {
    .btn-globe-rotater {
      opacity: 1;
      background-color: rgba(0, 0, 200, 0.9);
    }
    .globe-datetime {
      display: flex;
      // opacity: 1;
      background-color: rgba(0, 0, 0, 0.9);
    }
    .globe-rotater-settings {
      display: flex;
      align-items: stretch;
      width: 12em;
      // opacity: 1;
      background-color: rgba(0, 0, 0, 0.9);
    }
  }

  // .btn-globe-rotater {
  //   &:active {
  //     opacity: 0.5;
  //     background-color: rgba(0, 0, 200, 0.9);
  //   }
  // }
}
</style>
